import { Form, Input, message } from 'antd';
import { useState } from 'react';
import an58 from '@mmstudio/an000058';
import Button from '../../../components/button';
import api from '../../../atoms/api';
import { Message as M1, Result as R1 } from '../../api/account/changepsw.api';

export default function Content() {
	const [oldpsw, setoldpsw] = useState('');
	const [newpsw, setnewpsw] = useState('');
	const [newpsw1, setnewpsw1] = useState('');
	return <>
		<Form
			layout='horizontal'
			labelCol={{ span: 4 }}
			wrapperCol={{ span: 16 }}
		>
			<Form.Item required label="原密码:">
				<Input type='password' onChange={(e) => {
					setoldpsw(e.target.value);
				}} />
			</Form.Item>
			<Form.Item required label="新密码:">
				<Input type='password' onChange={(e) => {
					setnewpsw(e.target.value);
				}} />
			</Form.Item>
			<Form.Item required label="确认新密码:">
				<Input type='password' onChange={(e) => {
					setnewpsw1(e.target.value);
				}} />
			</Form.Item>
			<div className='footer'>
				<Button type='primary' onClick={async () => {
					if (!oldpsw) {
						message.error('原密码为空');
						return;
					}
					if (!newpsw) {
						message.error('新密码为空');
						return;
					}
					if (!newpsw1) {
						message.error('请确认密码');
						return;
					}
					if (newpsw !== newpsw1) {
						message.error('两次输入的密码不一致');
						setnewpsw('');
						setnewpsw1('');
						return;
					}
					if (newpsw.length < 3 || newpsw.length > 500) {
						message.error('密码长度须大于3位且不得超过500');
						return;
					}
					const ret = await an58<R1, M1>(api['/api/account/changepsw'], 'post', {
						newpsw,
						oldpsw
					});
					if (ret.ok === true) {
						setoldpsw('');
						setnewpsw('');
						setnewpsw1('');
						message.success('修改成功');
					} else {
						message.error(ret.message);
					}
				}} >保存</Button>
			</div>
		</Form>
		<style jsx>{`
.footer{
display: flex;
flex-direction: row;
justify-content: center;
}
`}</style>
	</>;
}
